import React, { useEffect } from "react";
import { View, StyleSheet, Dimensions, Text, Image } from "react-native";
import { Button } from "@rneui/themed";
import IconNavBar from '@/components/IconNavBar'
import { sectokenCommonCenterProps } from '@/config/navigatorProps'
import RecoveryImg from '@/assets/imgs/recovery.png'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const RecoveryPrompt = (props) => {
    useEffect(() => {

    }, [])

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const handlePressRecovery = () => {
        props.navigation.navigate("verify-mnemonic")
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} handlePressLeft={handlePressLeft}
                {...sectokenCommonCenterProps}
                {...{ title: 'Restore Wallet', backgroundColor: '#F5F6FA' }} />
            <View style={styles.bodyContent}>
                <Image source={RecoveryImg} style={styles.img} />
                <View style={styles.titleContent}>
                    <Text style={styles.title1}>What are mnemonics?</Text>
                    <View style={styles.divider}></View>
                    <Text style={{ ...styles.title2, marginLeft: 28 * ratio, marginTop: 15 * ratio, width: 287 * ratio, lineHeight: 30 }}>
                        When a new wallet is created, a set of 12 word mnemonic words will be randomly generated
                        Mnemonics are the only way to control assets
                        Once mnemonics are lost, assets cannot be recovered
                    </Text>
                </View>
                <View style={{ flex: 1, justifyContent: 'flex-end' }}>
                    <View style={{ width: width, height: 65 * ratio, backgroundColor: '#FFFFFF', alignItems: 'center', justifyContent: 'center' }}>
                        <Button buttonStyle={styles.button} onPress={handlePressRecovery}>
                            <Text style={{ ...styles.title2, color: '#FFFFFF' }}>Understood and started recovery</Text>
                        </Button>
                    </View>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F6FA'
    },
    bodyContent: {
        flex: 1,
        alignItems: 'center'
    },
    titleContent: {
        width: 335 * ratio,
        height: 220 * ratio,
        backgroundColor: '#FFFFFF',
        borderWidth: 1,
        borderColor: 'D6D6D6',
        borderRadius: 5,
        marginTop: 26 * ratio
    },
    img: {
        width: 235 * ratio,
        height: 224 * ratio,
        marginTop: 35 * ratio
    },
    title1: {
        fontSize: 16,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        lineHeight: 21,
        color: '#262626',
        marginTop: 13 * ratio,
        marginLeft: 29 * ratio
    },
    title2: {
        fontSize: 13,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        lineHeight: 17,
        color: '#898989'
    },
    divider: {
        width: 335 * ratio,
        height: 0,
        borderColor: '#E9E9E9',
        borderWidth: 1,
        marginTop: 14 * ratio
    },
    button: {
        width: 334 * ratio,
        height: 45 * ratio,
        backgroundColor: '#5B6DFD',
        borderRadius: 11
    }
})
export default RecoveryPrompt